<template>
  <view class="container">
    <!-- 顶部：设备ID与原型图 -->
    <view class="top">
      <!-- <view class="device-line">
        <text class="device-id">{{ deviceId }}</text>
        <view class="icons">
          <u-icon name="more-dot-fill" size="22" />
          <u-icon name="scan" size="22" style="margin-left: 12rpx;" />
        </view>
      </view> -->
      <image class="schema" mode="widthFix" src="/static/new/device.jpg" />

      <!-- 快速入口 -->
      <view class="quick-actions">
        <view class="qa-btn" @click="onParams">参数设置</view>
        <view class="qa-btn yellow" @click="onManual">手动操作</view>
        <view class="qa-btn red" @click="onAutoStop">自动停止</view>
        <view class="qa-btn green" @click="onAutoRun">自动运行</view>
      </view>
    </view>

    <!-- 监控项 -->
    <view class="section">
      <view class="section-title">监控项</view>
      <view class="monitor-box">
        <view class="monitor-empty">监控数据占位</view>
      </view>
    </view>

    <!-- 手动操作 -->
    <view class="section">
      <view class="section-title">手动操作</view>
      <view class="manual-box">
        <view v-for="(p, i) in pumps" :key="i" class="pump-row">
          <text class="pump-name">补水泵{{ i + 1 }}（{{ p.limit }}）</text>
          <view class="row-actions">
            <view class="btn blue" @click="setPump(i, true)">开启</view>
            <view class="btn red" @click="setPump(i, false)">关闭</view>
          </view>
        </view>

        <view class="vf-title">操作变频器</view>
        <view class="vf-row">
          <text class="vf-label">运行频率</text>
          <input
            class="vf-input"
            v-model="frequency"
            placeholder="请输入 Hz"
            type="number"
          />
        </view>
        <view class="vf-actions">
          <view class="btn dark" @click="applyFrequency">设置频率</view>
          <view class="btn blue" @click="startVF">开启</view>
          <view class="btn red" @click="stopVF">关闭</view>
        </view>
      </view>
    </view>

    <!-- 参数设置 -->
    <view class="section">
      <view class="section-title">参数设置</view>
      <view class="params-box">
        <view class="tabs">
          <view
            v-for="t in paramTabs"
            :key="t"
            :class="['tab', { active: activeParamTab === t }]"
            @click="activeParamTab = t"
            >{{ t }}</view
          >
        </view>
        <view class="param-content">
          <!-- 设备信息 -->
          <view v-if="activeParamTab === '设备信息'" class="param-card">
            <view class="param-line"
              ><text class="label">名称：</text
              ><text>{{ deviceInfo.name }}</text></view
            >
            <view class="param-line"
              ><text class="label">编号：</text
              ><text>{{ deviceInfo.serial }}</text></view
            >
            <view class="param-line"
              ><text class="label">型号：</text
              ><text>{{ deviceInfo.model }}</text></view
            >
          </view>

          <!-- 应用设置 -->
          <view
            v-else-if="activeParamTab === '应用设置'"
            class="param-card app-box"
          >
            <view class="sub-title">应用设置</view>
            <view class="app-grid">
              <view
                v-for="(opt, idx) in appOptions"
                :key="idx"
                class="app-item"
                @click="selectApp(idx)"
              >
                <view
                  class="dot"
                  :class="{ on: selectedAppIndex === idx }"
                ></view>
                <text class="opt-label">{{ opt }}</text>
              </view>
            </view>
            <view class="action-row">
              <view class="btn green" @click="readAppSettings"
                >读取当前参数</view
              >
              <view class="btn blue" @click="setAppSettings">设置</view>
            </view>
          </view>

          <!-- 补水参数：占位 -->
          <view
            v-else-if="activeParamTab === '补水参数'"
            class="param-card placeholder"
            >补水参数（占位）</view
          >

          <!-- 公共参数 -->
          <view
            v-else-if="activeParamTab === '公共参数'"
            class="param-card public-box"
          >
            <view class="sub-title">公共参数</view>
            <input class="public-input" v-model="publicParam" placeholder="" />
            <view class="action-row">
              <view class="btn green" @click="readPublicParam"
                >读取当前参数</view
              >
              <view class="btn blue" @click="setPublicParam">设置</view>
            </view>
          </view>

          <!-- 参数定时 -->
          <view
            v-else-if="activeParamTab === '参数定时'"
            class="param-card timing-box"
          >
            <view class="sub-title">参数定时</view>
            <view class="timing-tip"
              >启用后，时间段内系统运行，时间段外系统停止。</view
            >
            <view v-for="(seg, si) in paramTiming" :key="si" class="seg-block">
              <view class="seg-head">
                <view
                  class="dot"
                  :class="{ on: seg.enable }"
                  @click="toggleSegment(si)"
                ></view>
                <text class="seg-label">启用时段{{ si + 1 }}</text>
              </view>
              <view class="time-inputs">
                <picker
                  mode="time"
                  :value="seg.start"
                  @change="onTimeChange(si, 'start', $event)"
                >
                  <view class="time-box">{{ seg.start }}</view>
                </picker>
                <text class="to">到</text>
                <picker
                  mode="time"
                  :value="seg.end"
                  @change="onTimeChange(si, 'end', $event)"
                >
                  <view class="time-box">{{ seg.end }}</view>
                </picker>
              </view>
            </view>
            <view class="action-row">
              <view class="btn green" @click="readParamTiming"
                >读取当前参数</view
              >
              <view class="btn blue" @click="setParamTiming">设置</view>
            </view>
          </view>

          <!-- 其它：占位 -->
          <view v-else class="param-card placeholder"
            >{{ activeParamTab }}（占位）</view
          >
        </view>
      </view>
    </view>

    <!-- 远程面板 -->
    <view class="section">
      <view class="section-title">远程面板</view>
      <view class="remote-box">
        <!-- 组网格 -->
        <view class="remote-grid">
          <view
            v-for="g in remoteGroups"
            :key="g.id"
            :class="['remote-item', { active: activeRemoteGroup === g.id }]"
            @click="switchRemoteGroup(g.id)"
          >
            <view class="ri-title">{{ g.title }}</view>
            <view class="ri-desc">{{ g.desc }}</view>
          </view>
        </view>

        <!-- 当前组标题 -->
        <view class="remote-heading">
          <view class="line"></view>
          <text class="group-title">{{ currentGroup.title }}</text>
          <view class="line"></view>
        </view>

        <!-- 参数表单 -->
        <view class="remote-form">
          <view class="form-line">
            <text class="fl-label">参数代码</text>
            <input class="fl-input" v-model="remoteForm.code" placeholder="00" />
          </view>
          <view class="form-line">
            <text class="fl-label">当前值/设定值</text>
            <view class="value-row">
              <input class="fl-input" v-model="remoteForm.value" :placeholder="currentGroup.unit ? '请输入' : ''" />
              <text v-if="currentGroup.unit" class="unit">{{ currentGroup.unit }}</text>
            </view>
          </view>

          <view class="form-actions">
            <view class="btn green" @click="readRemoteParam">读取当前参数</view>
            <view class="btn blue" @click="setRemoteParam">设置</view>
          </view>

          <!-- 说明块 -->
          <view class="explain">
            <view class="exp-title">说明</view>
            <view class="exp-tag">可读可写</view>
            <view class="exp-line">【默认值】{{ currentGroup.default }}</view>
            <view class="exp-line">【范围】{{ currentGroup.range }}</view>
            <view class="exp-line">【备注说明】{{ currentGroup.note }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceId: "K1490078243343",
      pumps: [
        { limit: "上上限" },
        { limit: "上限" },
        { limit: "下限" },
        { limit: "下下限" },
      ],
      frequency: "",
      paramTabs: ["设备信息", "应用设置", "补水参数", "公共参数", "参数定时"],
      activeParamTab: "设备信息",
      deviceInfo: {
        name: "K1490078243343",
        serial: "K1490078243343",
        model: "KT05",
      },
      // 公共参数
      publicParam: "",
      // 应用设置（单选）
      appOptions: [
        "补水控制",
        "补水控制",
        "补水控制",
        "补水控制",
        "补水控制",
        "补水控制",
      ],
      selectedAppIndex: 0,
      // 参数定时：三个时段
      paramTiming: [
        { enable: false, start: "00:00", end: "00:00" },
        { enable: false, start: "00:00", end: "00:00" },
        { enable: true, start: "00:00", end: "00:00" },
      ],

      // 远程面板
      remoteGroups: [
        { id: "p0", title: "P0组", desc: "产品功能设置" },
        { id: "p1", title: "P1组", desc: "补水功能设置" },
        { id: "p2", title: "P2组", desc: "排水功能设置" },
        { id: "p3", title: "P3组", desc: "升温功能设置" },
        { id: "p4", title: "P4组", desc: "降温功能设置" },
        { id: "p5", title: "P5组", desc: "补排水功能设置" },
        { id: "p6", title: "P6组", desc: "网络功能设置" },
        { id: "p7", title: "P7组", desc: "系统设置" },
      ],
      activeRemoteGroup: "p0",
      remoteForm: { code: "00", value: "" },
      groupConfigs: {
        p0: { title: "P0组", unit: "", default: 1, range: "1-5", note: "" },
        p1: { title: "P1组", unit: "cm", default: 500, range: "0-2000", note: "" },
        p2: { title: "P2组", unit: "cm", default: 500, range: "0-2000", note: "举例:4-20mA液位变送器量程是5米，P200设置为500" },
        p3: { title: "P3组", unit: "", default: 0, range: "0-2", note: "" },
        p4: { title: "P4组", unit: "", default: 0, range: "0-2", note: "0:4-20mA传感器 端口传补 1:10K NTC热敏电阻3950 2:10K NTC热敏电阻3435" },
        p5: { title: "P5组", unit: "", default: 0, range: "—", note: "" },
        p6: { title: "P6组", unit: "", default: 0, range: "—", note: "" },
        p7: { title: "P7组", unit: "", default: 0, range: "—", note: "" },
      },
    };
  },
  computed: {
    currentGroup() {
      return this.groupConfigs[this.activeRemoteGroup];
    },
  },
  onLoad(options) {
    if (options && options.deviceId) this.deviceId = options.deviceId;
  },
  methods: {
    onParams() {
      uni.showToast({ title: "参数设置占位", icon: "none" });
    },
    onManual() {
      // uni.showToast({ title: "手动操作占位", icon: "none" });
      uni.showModal({
        title: '提示',
        content: '确认手动操作吗？',
        showCancel: true,
        success: ({ confirm, cancel }) => {}
      })
    },
    onAutoStop() {
      // uni.showToast({ title: "自动停止占位", icon: "none" });
      uni.showModal({
        title: '提示',
        content: '确认自动停止吗？',
        showCancel: true,
        success: ({ confirm, cancel }) => {}
      })
    },
    onAutoRun() {
      // uni.showToast({ title: "自动运行占位", icon: "none" });
      uni.showModal({
        title: '提示',
        content: '确认自动运行吗？',
        showCancel: true,
        success: ({ confirm, cancel }) => {}
      })
    },
    setPump(i, on) {
      uni.showToast({
        title: `补水泵${i + 1} ${on ? "开启" : "关闭"}（占位）`,
        icon: "none",
      });
    },
    applyFrequency() {
      if (!this.frequency)
        return uni.showToast({ title: "请输入频率", icon: "none" });
      uni.showToast({
        title: `已设置频率 ${this.frequency}Hz（占位）`,
        icon: "none",
      });
    },
    startVF() {
      uni.showToast({ title: "变频器开启（占位）", icon: "none" });
    },
    stopVF() {
      uni.showToast({ title: "变频器关闭（占位）", icon: "none" });
    },
    openRemote() {
      uni.showToast({ title: "远程面板占位", icon: "none" });
    },

    // 应用设置
    selectApp(idx) {
      this.selectedAppIndex = idx;
    },
    readAppSettings() {
      uni.showToast({ title: "已读取应用设置", icon: "none" });
    },
    setAppSettings() {
      uni.showToast({ title: "应用设置已提交", icon: "none" });
    },

    // 公共参数
    readPublicParam() {
      uni.showToast({ title: "已读取公共参数", icon: "none" });
    },
    setPublicParam() {
      uni.showToast({ title: "公共参数已提交", icon: "none" });
    },

    // 参数定时
    toggleSegment(i) {
      this.paramTiming[i].enable = !this.paramTiming[i].enable;
    },
    onTimeChange(i, key, e) {
      const val = e.detail && e.detail.value ? e.detail.value : "00:00";
      this.$set(this.paramTiming[i], key, val);
    },
    readParamTiming() {
      uni.showToast({ title: "已读取参数定时", icon: "none" });
    },
    setParamTiming() {
      uni.showToast({ title: "参数定时已提交", icon: "none" });
    },

    // 远程面板交互
    switchRemoteGroup(id) {
      this.activeRemoteGroup = id;
      this.remoteForm.value = "";
    },
    readRemoteParam() {
      const cfg = this.groupConfigs[this.activeRemoteGroup];
      this.remoteForm.value = String(cfg.default);
      uni.showToast({ title: "已读取当前参数", icon: "none" });
    },
    setRemoteParam() {
      const v = this.remoteForm.value;
      if (v === "" || v == null)
        return uni.showToast({ title: "请输入设定值", icon: "none" });
      uni.showToast({ title: "已提交设置", icon: "none" });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.container {
  min-height: 100%;
  background: #f6f7fb;
  padding: 16rpx;
}

.device-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12rpx 6rpx;
}
.device-id {
  font-size: 28rpx;
  font-weight: 600;
  color: #1e1f23;
}
.icons {
  display: flex;
  align-items: center;
}

.schema {
  width: 100%;
  border-radius: 12rpx;
  margin-top: 12rpx;
  background: #fff;
}

.quick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16rpx 0;
}
.qa-btn {
  flex: 1;
  background: #60a4f7;
  color: #fff;
  border-radius: 34rpx;
  padding: 18rpx 0;
  text-align: center;
  margin-right: 16rpx;
  font-size: 24rpx;
}
.qa-btn:last-child {
  margin-right: 0;
}
.qa-btn.yellow {
  background: #f7b43c;
}
.qa-btn.red {
  background: #ff6b6b;
}
.qa-btn.green {
  background: #22c55e;
}

.section {
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
  margin-bottom: 20rpx;
  overflow: hidden;
}
.section-title {
  background: #60a4f7;
  color: #fff;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  font-weight: 600;
}

.monitor-box {
  padding: 20rpx;
}
.monitor-empty {
  height: 260rpx;
  border: 2rpx solid #dfe3ea;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b8d93;
}

.manual-box {
  padding: 20rpx;
}
.pump-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.pump-name {
  font-size: 26rpx;
  color: #1e1f23;
}
.row-actions {
  display: flex;
  gap: 16rpx;
}
.btn {
  padding: 16rpx 26rpx;
  border-radius: 12rpx;
  color: #fff;
  font-size: 24rpx;
}
.btn.blue {
  background: #60a4f7;
}
.btn.red {
  background: #ff6b6b;
}
.btn.dark {
  background: #333;
}
.btn.big {
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-title {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #1e1f23;
}
.vf-row {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}
.vf-label {
  color: #6b7280;
  margin-right: 12rpx;
}
.vf-input {
  flex: 1;
  height: 66rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 0 16rpx;
  background: #f9fafb;
}
.vf-actions {
  display: flex;
  gap: 16rpx;
  margin-top: 16rpx;
}

.params-box {
  padding: 20rpx;
}
.tabs {
  display: flex;
  gap: 30rpx;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}
.tab {
  background: #b7bfc9;
  color: #fff;
  border-radius: 18rpx;
  padding: 12rpx 20rpx;
  font-size: 24rpx;
}
.tab.active {
  background: #60a4f7;
}
.param-card {
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 16rpx;
  color: #1e1f23;
}
.param-card.placeholder {
  color: #8b8d93;
}
.param-line {
  display: flex;
  margin: 10rpx 0;
}
.label {
  width: 140rpx;
  color: #6b7280;
}

/* 公共参数 */
.sub-title {
  font-size: 28rpx;
  color: #1e1f23;
  margin-bottom: 12rpx;
}
.public-input {
  width: 100%;
  height: 72rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 0 16rpx;
  background: #f3f4f6;
}
.action-row {
  display: flex;
  gap: 16rpx;
  margin-top: 16rpx;
}
.btn.green {
  background: #22c55e;
}

/* 应用设置 */
.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12rpx;
}
.app-item {
  display: flex;
  align-items: center;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 16rpx;
}
.opt-label {
  margin-left: 12rpx;
  color: #1e1f23;
}
.dot {
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  background: #9ca3af;
}
.dot.on {
  background: #22c55e;
}

/* 参数定时 */
.timing-tip {
  color: #ef4444;
  margin-bottom: 12rpx;
}
.seg-block {
  padding: 12rpx 0;
  border-top: 2rpx dashed #e5e7eb;
}
.seg-head {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 10rpx;
}
.seg-label {
  color: #1e1f23;
}
.time-inputs {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.time-box {
  min-width: 140rpx;
  padding: 12rpx 16rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  background: #f3f4f6;
  text-align: center;
}
.to {
  color: #6b7280;
}

.remote-box {
  padding: 20rpx;
}

.remote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16rpx;
}
.remote-item {
  background: #f0f2f5;
  border-radius: 10rpx;
  border: 2rpx solid #e5e7eb;
  padding: 16rpx;
}
.remote-item.active {
  background: #b7bfc9;
}
.ri-title { font-size: 24rpx; color: #1e1f23; margin-bottom: 6rpx; }
.ri-desc { font-size: 22rpx; color: #6b7280; }

.remote-heading {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin: 18rpx 0 10rpx;
}
.remote-heading .line { flex: 1; height: 2rpx; background: #dfe3ea; }
.group-title { color: #1e1f23; font-size: 26rpx; }

.remote-form { border: 2rpx solid #e5e7eb; border-radius: 10rpx; padding: 16rpx; }
.form-line { display: flex; align-items: center; margin-bottom: 12rpx; }
.fl-label { width: 220rpx; color: #6b7280; }
.fl-input { flex: 1; height: 66rpx; border: 2rpx solid #e5e7eb; border-radius: 8rpx; padding: 0 16rpx; background: #f9fafb; }
.value-row { display: flex; align-items: center; gap: 10rpx; }
.unit { color: #6b7280; min-width: 60rpx; text-align: right; }
.form-actions { display: flex; gap: 16rpx; margin-top: 10rpx; }

.explain { margin-top: 12rpx; }
.exp-title { font-size: 26rpx; color: #1e1f23; margin-bottom: 6rpx; }
.exp-tag { display: inline-block; background: #22c55e; color: #fff; border-radius: 8rpx; padding: 6rpx 12rpx; font-size: 22rpx; margin-bottom: 6rpx; }
.exp-line { color: #1e1f23; margin: 4rpx 0; }
</style>
